<template>
  <el-dialog
    v-model="visible"
    title="包裹详情"
    width="486"
    align-center
    :show-close="true"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :before-close="clickClose"
  >
    <div class="package-detail">
      <el-table class="jzt-table" :data="list" border stripe style="width: 100%">
        <el-table-column prop="productAliasName" show-overflow-tooltip label="商品" width="160"> </el-table-column>
        <el-table-column prop="deliveryQuantity" show-overflow-tooltip label="数量" />
        <el-table-column prop="deliveryPartQuantity" show-overflow-tooltip label="件数" />
        <el-table-column fixed="right" show-overflow-tooltip label="发货状态" width="90">
          <template #default>
            <el-tag type="success" effect="dark" size="small">已发货</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, watch, onMounted } from "vue";
import { ElMessage } from "element-plus";

const visible = ref(false);
const emit = defineEmits(["close"]);
const props = defineProps({
  optionInfo: {
    type: Object,
    default: () => {
      return {
        isShow: false,
        detail: []
      };
    }
  }
});
const list = ref([]);

watch(
  () => props.optionInfo.isShow,
  async val => {
    visible.value = val;
  },
  { deep: true }
);
watch(
  () => props.optionInfo.detail,
  async val => {
    list.value = val;
  },
  { deep: true }
);
onMounted(async () => {});

const clickClose = () => {
  emit("close");
};
</script>

<style lang="scss" scoped>
.block {
  height: 10px;
  margin: 20px -24px;
  background-color: #eef1f4;
}
.package-detail {
}
</style>
